<template>
  <view>
    <view class="topBox" v-if="!navbar"></view>
    <view class="header">
      <uni-icons type='left' class="back" size="24" color="#fff" @click="back()"></uni-icons>
      <view class="integral" @click="goIntegralDetail()">
        <text class="value">{{userInfo.integral}}</text>
        <text class="name">积分</text>
      </view>
      <view class="myShop" @click="show()">
        我的
      </view>
    </view>

    <view class="navBar" v-if='navbar'>
      <uni-icons type='left' class="back" size="24" @click="back()"></uni-icons>
      <view class="title">
        积分商城
      </view>
      <view class="myShop" @click="show()">
        我的
      </view>
    </view>

    <my-search bgcolor="#f5f5f5" title='商品' @goSearch='goSearch'></my-search>

    <scroll-view enable-flex class="goods-type" scroll-x='true'>
      <block v-for="(item,index) in goodsType" :key='index'>
        <view :class="['box',active===index?'active':'']" @click="toggleType(index)">{{item}}</view>
      </block>
    </scroll-view>

    <view class="goods-list">
      <block v-for='(item,index) in goodsInfo' :key='index'>
        <goods-box :item='item' @chooseGoods='chooseGoods'></goods-box>
      </block>
    </view>

    <view class="popup" v-show="showPopup" @click="close()">
      <view class="popup-info" @click.stop.prevent="">
        <view class="my-order" @click="goMyOrder()">
          <uni-icons type="cart" size="24"></uni-icons>
          <text>我的订单</text>
        </view>
        <view class="address" @click="goAddress()">
          <uni-icons type="location" size="24"></uni-icons>
          <text>收货地址</text>
        </view>
        <view class="integralDetail" @click="goIntegralDetail()">
          <uni-icons type="calendar" size="24"></uni-icons>
          <text>积分明细</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        navbar: false,
        showPopup: false,
        goodsInfo: [],
        page: 1,
        pagesize: 6,
        goodsType: ['全部', '服饰', '电子产品', '书籍', '生活用品', '食品', '其他'],
        active: 0,
      };
    },
    created() {
      this.getGoodsInfo()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      async getGoodsInfo() {
        const data = await uni.$http.post('/users/product/page', {
          page: this.page,
          pagesize: this.pagesize
        })
        this.goodsInfo = data.data.data.records
        // console.log(data.data.data.records[0]);
      },
      goSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      },
      goMyOrder() {
        uni.navigateTo({
          url: '/subpkg/myOrder/myOrder'
        })
      },
      goIntegralDetail() {
        uni.navigateTo({
          url: '/subpkg/integralDetail/integralDetail'
        })
      },
      goAddress() {
        uni.navigateTo({
          url: '/subpkg/address/address'
        })
      },
      show() {
        this.showPopup = true
      },
      close() {
        this.showPopup = false
      },
      async toggleType(i) {
        if (this.active != i) {
          this.active = i
          this.pagesize = 6
        }
        if (i == 0) {
          this.getGoodsInfo()
        } else {
          const data = await uni.$http.post('/users/product/category', {
            categoryName: this.goodsType[i],
            page: this.page,
            pagesize: this.pagesize
          })
          console.log(data.data.data.records);
          this.goodsInfo = data.data.data.records
        }
      },
      chooseGoods(id) {
        uni.navigateTo({
          url: '/subpkg/goodsDetail/goodsDetail?goodsId=' + id
        })
      },
    },
    computed: {
      ...mapState('my_user', ['userInfo']),
    },
    onPageScroll(res) {
      if (res.scrollTop > 48) {
        this.navbar = true
      } else {
        this.navbar = false
      }
    },
    onReachBottom() {
      this.pagesize += 4
      this.toggleType(this.active)
    }
  }
</script>

<style lang="scss">
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    margin-top: 70rpx;
    background-color: #b6eaae;
    color: #fff;
    box-sizing: border-box;

    .back {
      margin-left: 20rpx;
      font-size: 34rpx;
    }

    .integral {

      .value {
        font-size: 38rpx;
        font-weight: 700;
      }

      .name {
        font-size: 30rpx;
      }
    }

    .myShop {
      width: 140rpx;
      height: 64rpx;
      margin-left: 220rpx;
      font-size: 30rpx;
      // font-weight: 700;
      text-align: center;
      line-height: 64rpx;
      border-radius: 32rpx;
      background-color: rgba(0, 0, 0, 0.05);
    }
  }

  .navBar {
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 170rpx;
    padding-top: 60rpx;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    z-index: 999;

    .title {
      font-size: 34rpx;
    }

    .myShop {
      margin-left: 240rpx;
      font-size: 34rpx;
    }
  }

  .topBox {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70rpx;
    background-color: #fff;
  }

  .goods-type {
    display: flex;
    width: 100%;
    height: 80rpx;
    margin-top: 20rpx;
    white-space: nowrap;

    .box {
      height: 64rpx;
      display: inline-block;
      margin-left: 20rpx;
      padding: 0 30rpx;
      font-size: 30rpx;
      text-align: center;
      line-height: 64rpx;
      border-radius: 32rpx;
      color: #999;
      background-color: #fff;

      &.active {
        font-size: 32rpx;
        background-color: #b6eaae;
        color: #fff;
      }
    }
  }

  .goods-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
  }

  .popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9998;

    .popup-info {
      position: fixed;
      top: 180rpx;
      left: 350rpx;
      width: fit-content;
      transfor: translate(-50%, -50%);
      font-size: 30rpx;
      background-color: #fff;
      border-radius: 10rpx;
      overflow: hidden;
      z-index: 9999;

      .my-order,
      .address,
      .integralDetail {
        display: flex;
        align-items: center;
        padding: 10rpx 20rpx;
        height: 80rpx;
        border-bottom: 1rpx solid #eee;

        text {
          margin-right: 20rpx;
          text-align: center;
          line-height: 80rpx;
          font-size: 30rpx;
        }
      }
    }
  }
</style>